JavaScript DOM

Tags: #◇Web Development #◇CCAPDEV #◇JavaScript DOM #◇Code Snippets #◇M3

◇Overview

Extracted notes for JavaScript DOM covering both theoretical and practical elements.

◇Key Definitions

Document Object Model Allows programs and scripts to dynamically access and update the content, structure, and style of a document. Can change all HTML elements Can change all HTML attributes Can change all CSS styles The HTML DOM API essentially provides write access to the HTML document through JavaScript
Document Object Model HTML DOM is a standard object model and programming interface for HTML. Figure 1. An HTML document in DOM format
DOM Methods Finding HTML elements: document.getElementById(id) document.getElementsByTagName(name) document.getElementsByClassName(class)
After getting references to the elements... You can change the following: Content Attributes Styles
DOM Nodes https://developer.mozilla.org/en-US/docs/Web/API/Node

◇Code Implementation

Get Element By ID
The easiest way to find an HTML element in the DOM is by using the element id
<p id=“txt1”> Text 1 </p>
<p id=“txt2”> Text 2 </p>
document.getElementById(“txt1”).innerHTML=“Hi!”;

Get Elements By TAG
This will return an array of objects of a specific <tag>
<p id=“intro”> Hello world! </p>
<p> Hello universe! </p>
<p class=“comment”> New comment </p>
document.getElementsByTagname(“p”);

Get Elements By CLASS
This will return an array of objects of a specific class name.
<p class=“txt”> Text 1 </p>
<p> Hello universe! </p>
<p class=“txt”> Text 2 </p>
var txtElements = document.getElementsByClassName(“txt”);

Changing Content
HTML
<p id=“p1”> Hello World </p>
JS
document.getElementById(“p1”).innerHTML = “New Text!”;
https://developer.mozilla.org/en-US/docs/Web/API/Element

Changing Content
HTML
<p id=“p1”> Hello World </p>
JS
var x = document.getElementById(“p1”);
x.innerHTML = “New Text!”;
https://developer.mozilla.org/en-US/docs/Web/API/Element

◇Syntax Breakdown

Ensure correct syntax for JavaScript DOM Pay attention to specific functions and declarations.

◇Complexity Analysis

Time Complexity: O(1) for typical operations unless looping. Space Complexity: O(1) generally.

◇References & Navigation

• Previous Topic: ◇JavaScript Basic Syntax
• Next Topic: ◇JQuery
• Related Notes: ◇Overview of Programming Languages